<template>
  <view>
    <view class="flex-between flex-wrap" v-if="props.list.length > 0">
      <navigator
        :url="`/class/goodsInfo?id=${item.clothId}`"
        class="item"
        v-for="(item, index) in props.list"
        :key="index"
      >
        <view class="con mr10 pt60 pb20">
          <!-- <view class="tag flex-center f12 bg-primary">7折</view> -->
          <image :src="item.imgUrl" class="ml14 mb10" />
          <view class="title">
            <view>{{ item.comment }}</view>
            <view class="f12 color-info mt10 line1">{{ item.clothName }}</view>
          </view>
        </view>
        <view class="pad30">￥{{ item.price }}</view>
      </navigator>
    </view>
    <view v-else class="mt100">
      <u-empty></u-empty>
    </view>
  </view>
</template>

<script setup lang="ts">
const props: any = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
})
</script>

<style lang="scss" scoped>
.item {
  width: 49%;

  .con {
    position: relative;
    width: 100%;
    background-color: #f6f6f6;

    .title {
      margin: auto;
      width: 90%;
      padding: 22rpx 12rpx;
      background-color: #dfdfdf;
    }

    .tag {
      position: absolute;
      top: 0;
      left: 0;
      width: 110rpx;
      height: 48rpx;
    }

    image {
      width: 90%;
      max-height: 300rpx;
    }
  }
}
</style>
